﻿import React, { Component} from 'react'
import PropTypes from 'prop-types';
import { connect } from 'react-redux'
import * as utils from '@/utils/index.js'
import { bindActionCreators } from 'redux'
import actionsC from '@/store/actions.js'
import { getCurrentNode } from '@/store/selectors'
import XInput from '@/components/x-input'
import PanleWrapper from '@/components/panel/panel-wrapper'
import {makeStyles, withStyles} from '@material-ui/styles'
import config from '@/config'
import Button from '@material-ui/core/Button'
import IconButton from '@material-ui/core/IconButton'
import DeleteIcon from '@material-ui/icons/Delete'

import themeStyles from '@/config/theme-styles'
import { weekdays } from 'moment'

let nodeActions=actionsC()

import { observer, inject } from 'mobx-react'
@inject('rootStore')
@observer
class PanleStyle extends Component {
	constructor(props) {
		super(props);
		this.state = {
			showNewItem: true,
			newItemData: {
				key: "",
				value: "",
			},
			ev_newItemBlur: false,
			mouseDownValue: false,
			styles: [
				{
					key: '',
					value: ''
				}
			]
		}
	}
	styleChange(index, prop, e){
		let {styles} = this.state
		styles[index][prop] = e.target.value
		this.setState({
			styles: styles
		})
	}
	componentWillReceiveProps(nextProp){
		const {currentNode} = nextProp;
		let styles = utils.ObjectToArray(currentNode.styles)
		styles.push({
			key: '',
			value: ''
		})
		this.setState({styles: styles})
	}
	panelBodyMouseDown(){
		this.setState({
			mouseDownValue: this.state.showNewItem
		})
	}
	panelBodyMouseUp(){
		const {mouseDownValue, showNewItem} = this.state
		if(mouseDownValue == showNewItem){
			this.setState({showNewItem: true},()=>{
				$(this.refs.newItem).focus()
			})
		}
	}
	handleItemBlur(){
		let {currentNode , currentPath, nodeTree} = this.props.rootStore;
		let styles_obj = utils.ArrayToObject(this.state.styles)
		let node = _.cloneDeep(currentNode)
		node.styles = styles_obj
		this.props.rootStore.nodeUpdateByPath({
			path: currentPath,
			node: node
		});
	}
	handleDel(index){
		const {currentNode, currentPath, nodeTree} = this.props.rootStore
		const {styles} = this.state
		let _styles = _.cloneDeep(styles)
		this.props.rootStore.nodeUpdateByPath({
			nodeTree: nodeTree,
			path: currentPath,
			act: 'unset',
			actPath: `styles.${styles[index].key}`
		});
		_styles.splice(index,1)
		this.setState({
			styles: _styles
		})
	}
	componentDidUpdate(){
		// this.props.scrollRefresh()
	}
	handleNumSlide(index, value){
		let { currentNode , currentPath, nodeTree} = this.props.rootStore;
		let {styles} = this.state
		styles[index].value = value
		this.setState({
			attr: styles
		})
		let styles_obj = utils.ArrayToObject(this.state.styles)
		let node = _.cloneDeep(currentNode)
		node.styles = styles_obj
		this.props.rootStore.nodeUpdateByPath({
			nodeTree: nodeTree,
			path: currentPath,
			node: node
		});
	}
	render() {
		const {classes, currentPath, nodeTree} = this.props.rootStore;
		let node = utils.getNodeByPath(nodeTree, currentPath)
		node = node?node:{}
		const {styles} = this.state
		return (
			<PanleWrapper clsName="panel-style" panelName="style">
			
			</PanleWrapper>
		)
	}
}

PanleStyle.defaultProps = {
};

export default withStyles(PanleStyle)